<template>
	<div class="result" style="padding-top: 20px;padding-bottom: 30px;" v-if="Object.keys(data).length > 0">
		<!-- <div class="title"> 请查收您的专属报告 </div>
					<div class="line"> </div> -->
		<div class="content" style="margin: 20px auto;">
			<div class="text_content">
				<div class="first">
					<div class="" style="display: flex;align-items: center;">
						<div class="left">
							<img :src="tou" class="avatar">
						</div>

						<div class="middle">
							<div class="right_first_line">
								<!-- 名称 -->
								<div class="name">
									{{ data.data.name }}
								</div>
								<!-- 教育 -->
								<!-- <div class="education">
										教育年限：{{ data.eduTotal }}年
									</div> -->
							</div>
						</div>
					</div>

					<div class="right">
						<!--  -->
						<div class="right_two_line">
							<div class="top">
								<div class="education">
									|&nbsp;&nbsp;&nbsp;{{ data.data.gender }}
								</div>
								<div class="education">
									|&nbsp;&nbsp;&nbsp;{{ data.data.age }}岁
								</div>
							</div>

							<div class="education">
								{{ data.data.reportDate }}
							</div>
						</div>
					</div>

				</div>

				<!-- <div class="test_number" style="margin-bottom:0px;">
							<div class="education"> 编号：{{ data.reportNo }} </div>
							<div class="education">
								主试人：{{ data.doctorName }}
							</div>
						</div> -->
			</div>
		</div>
		<!-- <div v-show="showSuggest" class="content" style="margin: 20px auto"> -->
		<!-- 					<div style="text-align: center;"><span style="font-size: 30px;">是否愿意把本小程序推荐给朋友 ？</span></div>
				<div style="text-align: center;">
					<div style="margin: 20px auto;margin-left: -20px;display: inline-block;"><button
							class="buttonClass"
							style="height: 50px; width: 230px;color: #004751;background-color: #66ffb5;font-size: 25px;font-weight: bold;"
							@click="showInfo(true)">是</button>
					</div>
					<div style="margin: 20px auto; margin-left: 30px; display: inline-block;"><button
							class="buttonClass"
							style="height: 50px; width: 230px; color: #66ffb5;background-color: #004751;font-size: 25px;font-weight: bold;"
							@click="showInfo(false)">否</button></div>
				</div> -->
		<!-- <div v-show="showSuggest" class="info-center">
					<span>\n</span>
					<div style="text-align: center;"><span style="font-size: 37px;">是否愿意把本小程序推荐给朋友 ？</span></div>
					<div style="text-align: center;">
						<div style="margin: 20px auto;display: inline-block;"><button class="buttonClass"
								style="height: 60px; width: 240px;color: #004751;background-color: #66ffb5;font-size: 29px;font-weight: bold;"
								@click="showInfo(true)">是</button>
						</div>
						<div style="margin: 20px auto;display: inline-block;margin-left: 20px;"><button
								class="buttonClass"
								style="height: 60px; width: 240px; color: #66ffb5;background-color: #004751;font-size: 29px;font-weight: bold;"
								@click="showInfo(false)">否</button></div>
					</div>
				</div> -->
		<div class="content">
			<div class="text_content">

				<div class="" style="display: flex;align-items: center;justify-content: space-between;">
					<div class="header_title">
						<img src="../../../img2/first2.png" alt="" style="" />
						<span style="color: #5978B5;font-size: 22px;" class="text">总体评价</span>
					</div>
					<div>
						<div class="status" style="color: #54C300" v-if="data.data.assessResult == 1">
							脑功能正常
						</div>
						<div class="status" style="color: #DEBC00" v-else-if="data.data.assessResult == 2">
							脑功能下降
						</div>
						<div class="status" style="color:#DE0000;" v-else> 脑功能损伤 </div>
					</div>
				</div>
				<!-- <u-line dashed></u-line> -->
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 16px"
					v-if="data.data.assessResult == 1 && data.data.detailContents[0].result == '正常'">
					<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/normal.png"
						mode="widthFix" style="width: 600px;margin-bottom: 30px;">
					<span>结果解释：您本次测评结果显示为脑功能正常，说明您尚不存在患有认知障碍的风险。</span>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 16px"
					v-else-if="data.data.assessResult == 1 && data.data.detailContents[0].result == '异常'">
					<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/normal.png"
						mode="widthFix" style="width: 600px;margin-bottom: 30px;">
					<span>结果解释：您本次测评结果显示为脑功能功能基本正常，但存在主观认知下降。</span>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 16px"
					v-else-if="data.data.assessResult == 2">
					<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/descend.png"
						mode="widthFix" style="width: 600px;margin-bottom: 30px;">
					<span>结果解释：您本次测评结果显示为脑功能下降，说明您存在患有认知障碍的风险。</span>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 16px" v-else>
					<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/harm.png" mode="widthFix"
						style="width: 600px;margin-bottom: 30px;">
					<span>结果解释：您本次测评结果显示为脑功能损伤，说明您存在患有认知障碍的风险。</span>
				</div>
			</div>
		</div>

		<div class="content">
			<div class="text_content">

				<div class="" style="display: flex;align-items: center;justify-content: space-between;">
					<div class="header_title">
						<img src="../../../img2/four2.png" alt="" style="" />
						<span style="color: #5978B5;font-size: 22px;" class="text">潜在风险</span>
					</div>
					<div>
						<div class="status" style="color: #54C300"
							v-if="96 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 101">
							暂无
						</div>
						<div class="status" style="color: #A3C300"
							v-else-if="86 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 96">
							较低
						</div>
						<div class="status" style="color: #DEBC00"
							v-else-if="61 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 86">
							中
						</div>
						<div class="status" style="color: #DE7200"
							v-else-if="21 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 61">
							较高
						</div>
						<div class="status" style="color: #DE0000;" v-else> 高 </div>
					</div>
				</div>

				<!-- <u-line dashed></u-line> -->
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 50px"
					v-if="96 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 101">

					<img style="width: 556px;margin-bottom: 50px;"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/oneStar.png"
						mode="widthFix">
					<div><span>您的脑健康状态非常好，需要注意保持长期观察，建议每隔30天进行脑健康复查，并通过训练保持状态</span></div>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 50px"
					v-else-if="86 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 96">
					<img style="width: 556px;margin-bottom: 50px;"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/twoStar.png"
						mode="widthFix">
					<div><span>您的脑健康状态良好，需要长期坚持脑部训练才能保持状态，建议通过训练可以保持状态稳定、避免记忆力、判断力、语言能力出现衰退</span></div>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 50px"
					v-else-if="61 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 86">
					<img style="width: 556px;margin-bottom: 50px;"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/threeStar.png"
						mode="widthFix">
					<div>
						<span>您的脑健康状态属于中等水平，长期的大脑健康训练对您是有必要的，您可能会出现记忆减退，判断能力下降、语言能力受损等情况，建议通过训练恢复您的记忆力、判断力等大脑基础能力</span>
					</div>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 50px"
					v-else-if="21 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 61">
					<img style="width: 556px;margin-bottom: 50px;"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/fourStar.png"
						mode="widthFix">
					<div><span
							style="color: #DE7200;">您的脑健康状态持续下降，如果不及时进行康复训练，将会出现记忆严重受损、语言能力、视觉能力下降等，建议通过训练来改善您的脑健康状态</span>
					</div>
				</div>
				<div class="zhushi risk" style="margin-bottom: 40px; margin-top: 50px" v-else>
					<img style="width: 556px;margin-bottom: 50px;"
						src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/fiveStar.png"
						mode="widthFix">
					<div><span style="color: #DE0000;">您的脑健康状态已处于严重退化阶段，如果不及时进行康复训练，会逐渐丧失语言和活动能力，请您及时到医院就诊，遵照医嘱进行治疗</span>
					</div>
				</div>
			</div>
		</div>

		<div class="content">
			<div class="text_content">
				<!-- <u-line dashed></u-line> -->
				<!-- <u-line dashed></u-line> -->
				<div class="" style="display: flex;align-items: center;justify-content: space-between;">
					<div class="header_title">
						<img src="../../../img2/secend2.png" alt="" style="" />
						<span style="color: #5978B5;font-size: 22px;" class="text">脑健康指数</span>
					</div>
					<div class="source">
						<span class="source_number" :style="{ color: scoreColor(data.data.score) }">{{ data.data.score
						}}</span>
						<span class="fen" :style="{ color: scoreColor(data.data.score) }">分</span>
					</div>
				</div>
				<!-- 进度条外层 -->
				<div class="progress">
					<!-- <u-line-progress :percentage="data.score" :showText="false">
							</u-line-progress> -->
					<el-progress :percentage="data.data.score" :showText="false"
						:color="scoreColor(data.data.score)"></el-progress>
					<img src="./kedu.png" alt=""
						style="width: 485px;height: 12px;margin: auto;position: relative;top: -34px;right: -60px;">
					<div class="shuzi" style="margin-top: -36px;">
						<div class=""> 0 </div>
						<div class=""> 10 </div>
						<div class=""> 20 </div>
						<div class=""> 30 </div>
						<div class=""> 40 </div>
						<div class=""> 50 </div>
						<div class=""> 60 </div>
						<div class=""> 70 </div>
						<div class=""> 80 </div>
						<div class=""> 90 </div>
						<div class=""> 100 </div>
					</div>
				</div>
				<div class="zhushi" style="padding-bottom: 40px; padding-top: 70px;font-size: 33px;">
					脑健康指数越高，表明您的脑健康状况越好
				</div>
			</div>
		</div>


		<!-- <div class="content" style="margin-bottom: 30px;text-align: center;">
					<img  src="../../../static/index/code.jpg"
						mode="widthFix">
				</div> -->
		<div class="content">
			<div class="remi" style="text-align: center;"
				v-if="0 <= data.data.brainHealthIndex && data.data.brainHealthIndex < 86">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-1.png" mode="widthFix">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-2.png" mode="widthFix">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/1-3.png" mode="widthFix">
			</div>
		</div>
		<div class="content">
			<div class="remi" style="text-align: center;">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/2-1.png" mode="widthFix">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/2-2.png" mode="widthFix">
				<img src="https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/2-3.png" mode="widthFix">
			</div>
		</div>

		<div class="content">
			<div class="text_content" style="padding-bottom: 30px;">
				<!-- <u-line dashed></u-line> -->
				<!-- <u-line dashed></u-line> -->
				<div class="header_title">
					<img src="../../../img2/five2.png" alt="" style="" />
					<span style="color: #5978B5;font-size: 22px;" class="text">脑健康指导建议</span>
				</div>
				<div class="zhushi " style="font-size: ;">
					<!-- <p v-html="
								data.adviceContents[0] ? data.adviceContents[0].content : ''
							"></p> -->
					<p v-html="data.data.adviceContents[0].content"></p>
				</div>
				<div class="zhushi_hui"
					style="margin-top: 40px;color: #a1b0b3;font-size: 20px;height: 66px;line-height: 36px;">
					<!-- <u-parse :content="data.noticeText"></u-parse> -->
				</div>

				<!-- 	<div class="" style="margin-top: 60px">
									<u-line dashed></u-line>
								</div> -->

				<!-- 	<div class="header_title">
									<img src="/static/img/five.png" alt="" style="" />
									<span style="" class="text">领取电子报告</span>
								</div>
								<div class="bottom">
									<div class="zhushi text">
										<div class="">
											关注公众号获取
											<br />
											详细的筛查报告及专业的健康建议
										</div>
									</div>
									<div class="imgage">
										<img src="/static/personal/ainao.jpg" alt="" style="width: 100%; height: 100%" />
									</div>
								</div> -->
			</div>
		</div>

		<!-- <div class="content" >
					<img  src="../../../static/index/code.png" mode="widthFix">
					</div> -->
		<!-- </div> -->
		<!-- <div class="helthSuggest">
				<div class="helthSuggest_left">
					<div class="thelthSuggest_left_text">
						点击查看健康建议
					</div>
					<div class="helthSuggest_left_btn" @click="receiveSuggest">
						立即查看
					</div>
				</div>
				<div class="helthSuggest_right">
					<img src="./rightimg.png" alt="" style="height: 100%;width: 100%;">
				</div>

			</div> -->
		<!-- <div class="fixed_bottom_box">
				<div class="bottom_first">
					<div class="left">
						<img src="./leftjian.png" alt="">
					</div>
					<div class="fixed_bottom_box_title">
						分享测评给身边的朋友
						共同预防脑认知疾病
					</div>
					<div class="right">
						<img src="./rightjian.png" alt="">
					</div>
				</div>
				<div class="btns">
					<button open-type="share">
						<div class="btns_left">
							<u-icon name="weixin-fill" size="28"></u-icon>
							微信好友
						</div>
					</button>
					<div class="btns_right" @click="genraterImage"> 生成图片转发 </div>
				</div>
			</div> -->
	</div>
	<div class="title" v-else style="margin-top: 200px;">
		<el-col :sm="12" :lg="6">
			<el-result icon="info" title="您还未做筛查" subTitle="做完筛查可查看报告">
				<template slot="extra">
					<el-button type="primary" size="medium" @click="goNext">去筛查</el-button>
				</template>
			</el-result>
		</el-col>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";
// import res from "./res.json";
// import {
// 	getReport,
// 	getCamplog,
// 	updateUserInfo
// } from '@/api/api.js'
import axios from "axios";
import {
	getUrl
} from "@/config.js";
export default {
	data() {
		return {
			data: {},
			patientId: '',
			token2: '',
			showSuggest: true,
			hadSuggest: false,
			color: 'color:green'
		};
	},
	computed: {
		// ...mapState({
		// 		token: (state) => state.token,
		// avatar: (state) => state.userInfo.avatarUrl,
		// 		nickName: (state) => state.userInfo.nickName,
		// }),
		tou() {
			var sexInfo = "";
			if (this.$route.query.sex == 1) {
				sexInfo = "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/boy.jpg"
			}
			if (this.$route.query.sex == 0) {
				sexInfo = "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/girl.jpg"
			}
			if (this.$route.query.sex == null) {
				sexInfo = "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/head.jpg"
			}
			return sexInfo;
			// return 'sex = 1' ? "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/girl.jpg" :
			// 	"https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/boy.jpg";
			// return "https://www.ainaoxingdong.com/api/an-media/images/an/static/personal/girl.jpg"
		},
	},
	methods: {
		// longtap(){
		// 	console.log('长按保存图片');
		// 	let token = uni.getStorageSync('token')
		// 	console.log('token',token)

		// },
		// longtap() {
		// 	getCamplog().then(res => {
		// 		console.log('res,,', res)
		// 		const {
		// 			data
		// 		} = res
		// 		this.data = data.data || {}
		// 		// this.data.assessResult = 2
		// 		// this.data.detailContents[0].result = '异常'
		// 		// this.data = {}
		// 		console.log('data,', data)
		// 	})
		// },
		goNext() {
			this.$router.push('/message')
		},
		scoreColor(score) {
			const colorList = ['#DE0000', '#DE7200', '#DEBC00', '#A3C300', '#54C300', 'red'] // 颜色数组
			if (0 <= score && score < 21) {
				return '#DE0000'
			} else if (21 <= score && score < 61) {
				return '#DE7200'
			} else if (61 <= score && score < 86) {
				return '#DEBC00'
			} else if (86 <= score && score < 96) {
				return '#A3C300'
			} else if (96 <= score && score < 101) {
				return '#54C300'
			}
		},
		scrollInfo() {
			if (!this.hadSuggest) {
				this.showSuggest = true;
			}
		},
		showInfo(param) {
			var isSuggest = 0;
			if (param == true) {
				this.showSuggest = false;
				this.hadSuggest = true;
				isSuggest = 1;

			} else {
				this.showSuggest = false;
				this.hadSuggest = true;
				isSuggest = 0;
			}
			// updateUserInfo({
			// 	isSuggest: isSuggest,
			// }).then(res => {
			// 	wx.showToast({
			// 		title: '谢谢您的建议，我们会持续优化我们的筛查程序！',
			// 		icon: 'none',
			// 		duration: 2000
			// 	});
			// })
		},
		// receiveSuggest() {
		// 	uni.navigateTo({
		// 		url: `/pages/middleScreening/healthAdvice/healthAdvice`,
		// 	});
		// },
		// genraterImage() {
		// 	// 跳转到webdiv 加载图片生成网页
		// 	const url = `https://www.ainaoxingdong.com/html_img/index.html#/?query=${JSON.stringify({
		// 		token: this.token,
		// 		avatar: this.avatar,
		// 		type: '0',
		// 	})}`
		// 	// const url = `http://localhost:8080/#/?query=${JSON.stringify({
		// 	// 	token:this.token,
		// 	// 	avatar:this.avatar,
		// 	// 	type:'0',
		// 	// })}`
		// 	console.log("生成图片连接" + url);
		// 	uni.navigateTo({
		// 		url: `/pages/middleScreening/webdiv/webdiv?url=${encodeURIComponent(url)}`,
		// 	});
		// },
		report(params) {
			var baseUrl = getUrl();
			var token = localStorage.getItem("token");
			var reportUrl = baseUrl + "/an/wechat_app/wechat_user/report?token=" + token;
			if (params.patientId != "" && params.token != "") {
				reportUrl = reportUrl + "&js_patientId=" + params.js_patientId + "&js_token=" + params.js_token;
			}
			axios.get(reportUrl).then((res) => {
				const {
					data
				} = res
				this.data = data.data || {}
				console.log('data,', data)
			});
		},

	},
	mounted() {
		// console.log(res, "resresresresresresres");
		// const data = res.data;
		// this.data = data.data;
		var query = this.$route.query;
		var param = {};
		param.js_patientId = "";
		param.js_token = "";
		if (query.patientId != undefined || query.patientId != null) {
			param.js_patientId = query.patientId;
		}
		if (query.token != undefined || query.token != null) {
			param.js_token = query.token;
		}
		this.showSuggest = false;
		this.report(param);
	},

};
</script>

<style lang="scss" scoped>
.info-center {
	box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	position: fixed;
	z-index: 999;
	background-color: #D8FEEE;
	// display: flex;
	// align-items: center;
	// justify-content: center;
	border-radius: 10px;
	width: 80%;
	height: 220px;
	margin-left: 10%;
	margin-right: 10%;
}

.buttonClass {
	display: flex;
	justify-content: center;
	align-items: center;
}

button::after {
	border: none;
}

button {
	background-color: #fff;
	margin: 0;
	padding: 0;
}

page {
	// padding-bottom: 264px;
}

.helthSuggest {
	width: 670px;
	height: 222px;
	background: #66FFB5;
	box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.05);
	border-radius: 20px;
	margin: auto;
	margin-top: 20px;
	box-sizing: border-box;
	padding: 40px 30px;
	display: flex;

	.helthSuggest_left {
		flex: 1;

		.thelthSuggest_left_text {
			// width: 256px;
			height: 44px;
			font-size: 16px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #003941;
			line-height: 44px;

		}

		.helthSuggest_left_btn {
			width: 232px;
			height: 72px;
			background: #004751;
			box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
			border-radius: 20px;
			text-align: center;
			font-size: 32px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #66FFB5;
			line-height: 72px;
			margin-top: 26px;
		}
	}

	.helthSuggest_right {
		width: 220px;
		height: 136px;
	}
}

.fixed_bottom_box {
	width: 100vw;
	height: 264px;

	.bottom_first {
		width: 100%;
		display: flex;
		margin-top: 60px;

		.left {
			flex: 1;
			text-align: right;
			display: flex;
			align-items: center;
			justify-content: flex-end;

			img {
				width: 78px;
				height: 48px;
			}
		}

		.right {
			flex: 1;
			text-align: left;
			display: flex;
			align-items: center;

			img {
				width: 78px;
				height: 48px;
			}
		}

		.fixed_bottom_box_title {
			width: 320px;
			// height: 48px;
			line-height: 48px;
			// padding-top: 40px;
			text-align: center;
			font-size: 32px;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 550;
			color: #003941;
			line-height: 48px;
		}
	}


	.btns {
		margin-top: 40px;
		display: flex;
		justify-content: space-around;
	}

	.btns_left {
		width: 150px;
		height: 48px;
		background: #66ffb5;
		box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #003941;
	}

	.btns_right {
		width: 150px;
		height: 48px;
		background: #004751;
		box-shadow: 4px 6px 18px 0px rgba(31, 90, 102, 0.1);
		border-radius: 10px;
		font-size: 16px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #66ffb5;
		line-height: 48px;
		text-align: center;
	}
}

.zhushi_hui {
	width: 305px;
	height: 33px;
	font-size: 11px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #a1b0b3;
	line-height: 14px;
	text-align: center;
}

.header_title {
	margin: 30px 0;

	img {
		width: 42px;
		height: 42px;
		position: relative;
		top: 5px;
	}

	.text {
		height: 48px;
		font-size: 32px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #003941;
		line-height: 48px;
		margin-left: 10px;
	}
}

.status {
	height: 48px;
	font-size: 22px;
	font-family: PingFangSC-Medium, PingFang SC;
	font-weight: bold;
	color: #d96c36;
	line-height: 48px;
}

.zhushi {
	font-size: 33px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	// color: #336c74;
	// color: #B5C3E0;
	width: 600px;
	height: 100%;
	color: #5978B5;
	line-height: 48px;
}

.source {
	.source_number {
		height: 48px;
		font-size: 40px;
		font-family: DINAlternate-Bold, DINAlternate;
		font-weight: bold;
		// color: #003941;
		line-height: 48px;
	}

	.fen {
		width: 50px;
		height: 34px;
		font-size: 24px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #336c74;
		line-height: 34px;
	}
}

.progress {
	margin-top: 5px;
	width: 100%;
	height: 28px;

	// border-radius: 14px;
	// background: linear-gradient(270deg, #00CC6A 0%, #F2A247 100%);
	// opacity: 0.2;
	.u-line-progress__line {
		background: linear-gradient(270deg, #1bcc00 0%, #ffc400 50%, #ff0500 100%);
		// background: linear-gradient(270deg, #00cc6a 0%, #f2a247 100%);
	}

	.u-line-progress__background {
		// background-color: #cff5e1;
	}

	.shuzi {
		display: flex;
		justify-content: space-around;
		padding-top: 8px;

		div {
			text-align: center;
			padding: 0 22px;
			flex: 1;
			width: 22px;
			height: 22px;
			font-size: 16px;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #b8c0cc;
			line-height: 22px;
		}
	}
}

.box_1 {
	.algin {
		display: flex;
		justify-content: space-between;
		margin: 20px 0;
		width: 100%;
	}

	.heiti {
		height: 34px;
		font-size: 24px;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 550;
		color: #004751;
		line-height: 34px;
	}

	.text {
		height: 34px;
		font-size: 24px;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;

		line-height: 34px;
	}
}

.box_2 {
	margin-top: 30px;

	.box_title {}
}

.bottom {
	display: flex;
	align-items: center;

	.text {
		flex: 1;
	}

	.imgage {
		width: 168px;
		height: 168px;
		background-color: hotpink;
	}
}

// .scroller-content {
// 	width: 100%;
// 	height: calc(100vh - var(--window-top)); //calc()是动态计算函数
// 	//100vh:把屏幕高度分成100等份
// 	//--window-top屏幕顶部栏目部分
// }

.result {
	// background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 30%);
	// background-color: #EBF3FF;
	width: 100%;
	height: 100%;
	position: relative;

	.title {
		width: 180px;
		height: 30px;
		font-size: 20px;
		font-family: FZLTDHJW--GB1-0, FZLTDHJW--GB1;
		font-weight: normal;
		color: #ffffff;
		line-height: 30px;
		padding-left: 70px;
		padding-top: 40px;
	}

	.line {
		width: 690px;
		height: 20px;
		background: #336c74;
		border-radius: 20px;
		margin: auto;
		margin-top: 20px;
		z-index: 1;
		position: relative;
		opacity: 0.5;
		bottom: -10px;
	}

	.content {
		width: 670px;
		background: #ffffff;
		box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
		margin: auto;
		z-index: 44;
		position: relative;
		opacity: 1;
		border-radius: 20px 20px 20px 20px;

		.text_content {
			padding: 5px 30px;
			margin-bottom: 30px;
			display: flex;
			flex-direction: column;

			.education {
				height: 34px;
				font-size: 24px;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				// color: #336c74;
				color: #B5C3E0;
				line-height: 34px;
			}

			.first {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 184px;

				.left {
					width: 122px;
					height: 122px;
					border-radius: 50%;
					border: 2px solid #E7EFFF;

					img {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.middle {
					margin-left: 34px;

					.right_first_line {
						// display: flex;
						// width: 100%;
						// justify-content: space-between;

						.name {
							height: 48px;
							font-size: 32px;
							font-family: PingFangSC-Medium, PingFang SC;
							font-weight: 900;
							// color: #003941;
							color: rgba(85, 153, 255, 1);
							// line-height: 48px;
						}

						.education {
							line-height: 48px;
						}
					}
				}

				.right {
					// flex: 1;
					padding-left: 30px;
					height: 90px;
					display: flex;
					justify-content: space-between;


					.right_two_line {
						display: flex;
						flex-direction: column;
						width: 100%;
						align-items: flex-end;
						justify-content: space-between;

						.top {
							width: 150px;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}

			.test_number {
				display: flex;
				width: 100%;
				justify-content: space-between;
				margin-top: 40px;
				margin-bottom: 30px;
			}
		}
	}
}

.result222 {
	background: linear-gradient(180deg, #00cc6a 0%, #d8feeb 100%);
	width: 100%;
	position: relative;
	position: absolute;
	top: -99999px;
	left: -9999px;
	padding-top: 40px;

	.content222 {
		width: 670px;
		// height: 3288px;
		background: #ffffff;
		box-shadow: 0px 6px 16px 0px rgba(75, 126, 139, 0.1);
		margin: auto;
		// padding-top: -5px;
		z-index: 44;
		position: relative;
		opacity: 1;
		border-radius: 10px 10px 0px 0px;
		position: relative;
	}
}

.risk {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.el-progress {
	height: 30px !important;
	margin-bottom: 20px !important;
}

.el-progress-bar__outer {
	height: 25px !important;
}

.remi {
	width: 100%;
	height: 100%;
}

.remi img {
	display: block;
	width: 100%;
	height: 100%;
}
</style>
